<template>
  <div>
    <div class="package">
      <input type="text" class="txt" v-model="username" placeholder="输入用户名进行搜索">
      <button @click="searchPosts(username)" class="btn">SEARCH</button>
    </div>

    <div class="table">
      <table class="blog-table">
        <thead>
        <tr>
          <th>id</th>
          <th>Username</th>
          <th>Password</th>
          <th></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>
            <div style="height: 50px;width: 100px; overflow: hidden;">
              <div style="height: 50px;width: 200px; overflow: hidden;">{{ user.id }}</div>
              <!--                        <router-link :to="{ name: 'BlogDetail', params: { id: blog.id } }">{{ blog.title }}</router-link>-->
            </div>
          </td>
          <td>
            <div style="height: 50px;width: 200px; overflow: hidden;">{{ user.username }}</div>
          </td>
          <td>
            <div style="height: 50px;width: 200px; overflow: hidden;">{{ user.password }}</div>
          </td>
          <td><button @click="editUser(user.id)" class="btn">编辑</button></td>
        </tr>
        </tbody>
      </table>
    </div>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      username: ''
    };
  },
  mounted() {
    this.getBlogData();
  },
  methods: {
    getBlogData() {
      axios.get('/api/backendUser')
          .then(response => {
            this.users = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    searchPosts(username) {
      axios.get(`/api/users?username=${username}`)
          .then(response => {
            if (response.data === null) {
              alert("查询无结果");
            } else {
              this.users= response.data;
            }
          })
          .catch(error => {
            console.error(error);
          });
    },
    editUser(id) {
      this.$router.push({ path: `/editUser/${id}` });
    }
  },
};
</script>

<style>
.package{
  display: block;
  text-align: center;
  margin-bottom: 54px;
}
.txt{
  width: 215px;
  height: 25px;
  outline: none;
  border:0;
  border-radius: 5px;
  background:#d1d2d4;

}
.btn{
  width:65px;
  height: 35px;
  background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
  border-radius: 5px;
}
.btn:hover{
  cursor: pointer;
  background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);
}
.table{
  margin-top:100px;
}
.blog-table {
  width: 100%;
  border-collapse:separate;
  border-spacing:4px;
}

.blog-table td {
  padding: 12px;
  text-align:left;
  border:0;
  border-bottom: 1px solid #fff;
  border-radius: 4px;
}

.blog-table th {
  padding: 12px;
  text-align: center;
  border:0;
  border-bottom: 1px solid #fff;
  border-radius: 4px;
  background:linear-gradient(90deg, #d1d2d4,#73f219,#000000);
  color-image:#fff;
  font-family: Papyrus;
}
.blog-table tbody tr:hover {
  background-color: #fff;
}
</style>
